CSS માં નિપુણતા: @property સાથે કસ્ટમ પ્રોપર્ટી રજિસ્ટ્રેશન

કસ્ટમ પ્રોપર્ટીઝ (જેને CSS વેરિયેબલ્સ તરીકે પણ ઓળખવામાં આવે છે) એ આપણે જે રીતે CSS લખીએ છીએ અને જાળવીએ છીએ તેમાં ક્રાંતિ લાવી છે. તે આપણને પુનઃઉપયોગી મૂલ્યોને વ્યાખ્યાયિત કરવાની મંજૂરી આપે છે, જે આપણી સ્ટાઇલશીટને વધુ લવચીક અને જાળવણીક્ષમ બનાવે છે. પરંતુ શું થશે જો તમે માત્ર મૂલ્યોને વ્યાખ્યાયિત કરવાથી આગળ વધી શકો? શું થશે જો તમે કસ્ટમ પ્રોપર્ટી કયા પ્રકારનું મૂલ્ય ધરાવે છે, તેના પ્રારંભિક મૂલ્ય અને વારસાની વર્તણૂક સાથે વ્યાખ્યાયિત કરી શકો? બસ ત્યાં જ @property કામ આવે છે.

@property શું છે?

@property એ CSS એટ-રૂલ છે જે તમને બ્રાઉઝર સાથે કસ્ટમ પ્રોપર્ટીને સ્પષ્ટપણે રજીસ્ટર કરવાની મંજૂરી આપે છે. આ રજિસ્ટ્રેશન પ્રક્રિયા બ્રાઉઝરને પ્રોપર્ટીના અપેક્ષિત પ્રકાર, તેના પ્રારંભિક મૂલ્ય અને શું તે તેના પેરેન્ટ એલિમેન્ટમાંથી વારસામાં મળવું જોઈએ તે વિશે માહિતી પૂરી પાડે છે. આ ઘણી અદ્યતન ક્ષમતાઓને અનલૉક કરે છે, જેમાં શામેલ છે:

• ટાઇપ ચેકિંગ: ખાતરી કરે છે કે કસ્ટમ પ્રોપર્ટીને સાચા પ્રકારનું મૂલ્ય સોંપવામાં આવ્યું છે.
• એનિમેશન: સંખ્યાઓ અથવા રંગો જેવા વિશિષ્ટ પ્રકારની કસ્ટમ પ્રોપર્ટીઝ માટે સરળ સંક્રમણો (transitions) અને એનિમેશનને સક્ષમ કરે છે.
• ડિફૉલ્ટ મૂલ્યો: જો કસ્ટમ પ્રોપર્ટી સ્પષ્ટપણે વ્યાખ્યાયિત ન હોય તો ફોલબેક મૂલ્ય પ્રદાન કરે છે.
• વારસાનું નિયંત્રણ: નક્કી કરે છે કે કસ્ટમ પ્રોપર્ટી તેના પેરેન્ટ એલિમેન્ટમાંથી તેનું મૂલ્ય વારસામાં મેળવે છે કે નહીં.

તેને તમારા CSS વેરિયેબલ્સમાં ટાઇપ સેફ્ટી ઉમેરવા જેવું વિચારો. તે તમને વધુ મજબૂત અને અનુમાનિત સ્ટાઇલશીટ બનાવવાની મંજૂરી આપે છે.

@property નું સિન્ટેક્સ

The @property નિયમ આ મૂળભૂત સિન્ટેક્સને અનુસરે છે:

@property --property-name {
  syntax: '';
  inherits: true | false;
  initial-value: ;
}

ચાલો દરેક ભાગને સમજીએ:

• --property-name: તમે જે કસ્ટમ પ્રોપર્ટીને રજીસ્ટર કરવા માંગો છો તેનું નામ. તે બે હાઇફન (--) થી શરૂ થવું જોઈએ.
• syntax: પ્રોપર્ટી માટે અપેક્ષિત મૂલ્યનો પ્રકાર વ્યાખ્યાયિત કરે છે. આ ટાઇપ ચેકિંગ અને એનિમેશન માટે નિર્ણાયક છે. આપણે નીચે ઉપલબ્ધ સિન્ટેક્સ મૂલ્યોને વિગતવાર જોઈશું.
• inherits: એક બુલિયન મૂલ્ય જે દર્શાવે છે કે પ્રોપર્ટી તેના પેરેન્ટ એલિમેન્ટમાંથી વારસામાં મળવી જોઈએ કે નહીં. જો ઉલ્લેખ ન હોય તો ડિફૉલ્ટ false હોય છે.
• initial-value: પ્રોપર્ટી માટે ડિફૉલ્ટ મૂલ્ય, જો તે કોઈ એલિમેન્ટ પર સ્પષ્ટપણે સેટ ન હોય. આ ખાતરી કરે છે કે ફોલબેક મૂલ્ય હંમેશા ઉપલબ્ધ રહે.

syntax ડિસ્ક્રિપ્ટરને સમજવું

syntax ડિસ્ક્રિપ્ટર એ @property નિયમનો સૌથી મહત્વપૂર્ણ ભાગ છે. તે બ્રાઉઝરને જણાવે છે કે કસ્ટમ પ્રોપર્ટી માટે કેવા પ્રકારના મૂલ્યની અપેક્ષા રાખવી. અહીં કેટલાક સામાન્ય સિન્ટેક્સ મૂલ્યો છે:

• *: કોઈપણ મૂલ્યને મંજૂરી આપે છે. આ સૌથી ઉદાર સિન્ટેક્સ છે અને અનિવાર્યપણે રજિસ્ટ્રેશન વિનાના માનક CSS વેરિયેબલની વર્તણૂકની નકલ કરે છે. આનો ઓછો ઉપયોગ કરો.
• <length>: લંબાઈના મૂલ્યની અપેક્ષા રાખે છે (દા.ત., 10px, 2em, 50%). આ વિવિધ લંબાઈના મૂલ્યો વચ્ચે સરળ એનિમેશનને સક્ષમ કરે છે.
• <number>: આંકડાકીય મૂલ્યની અપેક્ષા રાખે છે (દા.ત., 1, 3.14, -5). ઓપેસિટી અથવા સ્કેલ જેવી આંકડાકીય પ્રોપર્ટીઝને એનિમેટ કરવા માટે ઉપયોગી છે.
• <percentage>: ટકાવારી મૂલ્યની અપેક્ષા રાખે છે (દા.ત., 25%, 100%).
• <color>: રંગના મૂલ્યની અપેક્ષા રાખે છે (દા.ત., #f00, rgb(255, 0, 0), hsl(0, 100%, 50%)). સરળ રંગ સંક્રમણો અને એનિમેશનને સક્ષમ કરે છે.
• <image>: ઇમેજ મૂલ્યની અપેક્ષા રાખે છે (દા.ત., url(image.jpg), linear-gradient(...)).
• <integer>: પૂર્ણાંક મૂલ્યની અપેક્ષા રાખે છે (દા.ત., 1, -10, 0).
• <angle>: ખૂણાના મૂલ્યની અપેક્ષા રાખે છે (દા.ત., 45deg, 0.5rad, 200grad). રોટેશનને એનિમેટ કરવા માટે ઉપયોગી છે.
• <time>: સમયના મૂલ્યની અપેક્ષા રાખે છે (દા.ત., 1s, 500ms). કસ્ટમ પ્રોપર્ટીઝ દ્વારા એનિમેશનની અવધિ અથવા વિલંબને નિયંત્રિત કરવા માટે ઉપયોગી છે.
• <resolution>: રિઝોલ્યુશન મૂલ્યની અપેક્ષા રાખે છે (દા.ત., 300dpi, 96dpi).
• <transform-list>: ટ્રાન્સફોર્મ ફંક્શન્સની સૂચિની અપેક્ષા રાખે છે (દા.ત., translateX(10px) rotate(45deg)). જટિલ ટ્રાન્સફોર્મેશનને એનિમેટ કરવાની મંજૂરી આપે છે.
• <custom-ident>: કસ્ટમ આઇડેન્ટિફાયર (એક સ્ટ્રિંગ)ની અપેક્ષા રાખે છે. enum જેવું જ.
• <string>: સ્ટ્રિંગ મૂલ્યની અપેક્ષા રાખે છે (દા.ત., "Hello World"). આનાથી સાવચેત રહો, કારણ કે સ્ટ્રિંગ્સને એનિમેટ કરવું સામાન્ય રીતે સપોર્ટેડ નથી.
• કસ્ટમ સિન્ટેક્સ: તમે ઉપરોક્તના સંયોજનો અને | (અથવા), `[]` (ગ્રૂપિંગ), `+` (એક અથવા વધુ), `*` (શૂન્ય અથવા વધુ), અને `?` (શૂન્ય અથવા એક) ઓપરેટર્સનો ઉપયોગ કરીને વધુ જટિલ સિન્ટેક્સ બનાવી શકો છો. ઉદાહરણ તરીકે: <length> | <percentage> લંબાઈ અથવા ટકાવારી મૂલ્યને મંજૂરી આપે છે.

@property ની સંપૂર્ણ શક્તિનો લાભ લેવા માટે સાચું syntax પસંદ કરવું આવશ્યક છે.

@property ના વ્યવહારુ ઉદાહરણો

ચાલો આપણે જોઈએ કે તમારા CSS માં @property નો ઉપયોગ કેવી રીતે કરવો તેના કેટલાક વ્યવહારુ ઉદાહરણો.

ઉદાહરણ 1: બેકગ્રાઉન્ડ કલરને એનિમેટ કરવું

ધારો કે તમે બટનના બેકગ્રાઉન્ડ કલરને એનિમેટ કરવા માંગો છો. તમે બેકગ્રાઉન્ડ કલર માટે કસ્ટમ પ્રોપર્ટી રજીસ્ટર કરવા માટે @property નો ઉપયોગ કરી શકો છો અને પછી તેને CSS ટ્રાન્ઝિશનનો ઉપયોગ કરીને એનિમેટ કરી શકો છો.

@property --bg-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}

.button {
  background-color: var(--bg-color);
  transition: --bg-color 0.3s ease;
}

.button:hover {
  --bg-color: #f00; /* Red */
}

આ ઉદાહરણમાં, અમે --bg-color કસ્ટમ પ્રોપર્ટીને <color> સિન્ટેક્સ સાથે રજીસ્ટર કરીએ છીએ, જેનો અર્થ છે કે તે રંગ મૂલ્યની અપેક્ષા રાખે છે. initial-value સફેદ (#fff) પર સેટ છે. જ્યારે બટન પર હોવર કરવામાં આવે છે, ત્યારે --bg-color લાલ (#f00) માં બદલાઈ જાય છે, અને ટ્રાન્ઝિશન બેકગ્રાઉન્ડ કલરમાં ફેરફારને સરળતાથી એનિમેટ કરે છે.

ઉદાહરણ 2: નંબર સાથે બોર્ડર રેડિયસને નિયંત્રિત કરવું

તમે એલિમેન્ટના બોર્ડર રેડિયસને નિયંત્રિત કરવા અને તેને એનિમેટ કરવા માટે @property નો ઉપયોગ કરી શકો છો.

@property --border-radius {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.rounded-box {
  border-radius: var(--border-radius);
  transition: --border-radius 0.5s ease;
}

.rounded-box:hover {
  --border-radius: 20px;
}

અહીં, અમે --border-radius ને <length> તરીકે રજીસ્ટર કરીએ છીએ, ખાતરી કરીને કે તે px, em, અથવા % જેવા લંબાઈના મૂલ્યોને સ્વીકારે છે. પ્રારંભિક મૂલ્ય 0px છે. .rounded-box પર હોવર કરતી વખતે, બોર્ડર રેડિયસ 20px પર એનિમેટ થાય છે.

ઉદાહરણ 3: શેડો ઑફસેટને એનિમેટ કરવું

ધારો કે તમે બોક્સ શેડોના હોરિઝોન્ટલ ઑફસેટને એનિમેટ કરવા માંગો છો.

@property --shadow-offset-x {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.shadowed-box {
  box-shadow: var(--shadow-offset-x) 5px 10px rgba(0, 0, 0, 0.5);
  transition: --shadow-offset-x 0.3s ease;
}

.shadowed-box:hover {
  --shadow-offset-x: 10px;
}

આ કિસ્સામાં, --shadow-offset-x ને <length> તરીકે રજીસ્ટર કરવામાં આવે છે, અને તેનું પ્રારંભિક મૂલ્ય 0px છે. box-shadow પ્રોપર્ટી તેના હોરિઝોન્ટલ ઑફસેટ માટે આ કસ્ટમ પ્રોપર્ટીનો ઉપયોગ કરે છે. હોવર પર, ઑફસેટ 10px પર એનિમેટ થાય છે.

ઉદાહરણ 4: થીમિંગ માટે <custom-ident> નો ઉપયોગ

<custom-ident> સિન્ટેક્સ તમને પૂર્વવ્યાખ્યાયિત સ્ટ્રિંગ મૂલ્યોનો સમૂહ વ્યાખ્યાયિત કરવાની મંજૂરી આપે છે, જે તમારા CSS વેરિયેબલ્સ માટે અસરકારક રીતે એક enum બનાવે છે. આ થીમિંગ અથવા વિશિષ્ટ સ્ટેટ્સને નિયંત્રિત કરવા માટે ઉપયોગી છે.

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light; /* Default Theme */
}

body {
  background-color: var(--theme) == light ? #fff : #333;
  color: var(--theme) == light ? #000 : #fff;
}

.dark-theme {
  --theme: dark;
}

અહીં, --theme ને <custom-ident> સિન્ટેક્સ સાથે રજીસ્ટર કરવામાં આવ્યું છે. જ્યારે આપણે @property નિયમમાં જ માન્ય આઇડેન્ટિફાયર્સની સ્પષ્ટપણે સૂચિબદ્ધ કરતા નથી, ત્યારે કોડ સૂચવે છે કે તે `light` અને `dark` છે. CSS પછી વર્તમાન થીમના આધારે વિવિધ સ્ટાઇલ લાગુ કરવા માટે કન્ડિશનલ લોજિક (var(--theme) == light ? ... : ...) નો ઉપયોગ કરે છે. કોઈ એલિમેન્ટમાં `dark-theme` ક્લાસ ઉમેરવાથી થીમ ડાર્કમાં બદલાઈ જશે. નોંધ લો કે `var()` નો ઉપયોગ કરીને કન્ડિશનલ લોજિક એ પ્રમાણભૂત CSS નથી અને તેને ઘણીવાર પ્રીપ્રોસેસર્સ અથવા જાવાસ્ક્રિપ્ટની જરૂર પડે છે. વધુ પ્રમાણભૂત અભિગમ CSS ક્લાસ અને કાસ્કેડિંગનો ઉપયોગ કરશે:

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light;
}

body {
  background-color: #fff;
  color: #000;
}

body[data-theme="dark"] {
  background-color: #333;
  color: #fff;
}

/* JavaScript to toggle the theme */
/* document.body.setAttribute('data-theme', 'dark'); */

આ સુધારેલા ઉદાહરણમાં, અમે થીમને નિયંત્રિત કરવા માટે body એલિમેન્ટ પર data-theme એટ્રિબ્યુટનો ઉપયોગ કરીએ છીએ. જાવાસ્ક્રિપ્ટ (કોમેન્ટ કરેલ) નો ઉપયોગ એટ્રિબ્યુટને `light` અને `dark` વચ્ચે ટૉગલ કરવા માટે થશે. આ CSS વેરિયેબલ્સ સાથે થીમિંગ માટે વધુ મજબૂત અને પ્રમાણભૂત અભિગમ છે.

@property નો ઉપયોગ કરવાના ફાયદા

@property નો ઉપયોગ કરવાથી ઘણા ફાયદા થાય છે:

• સુધારેલ કોડ વાંચનક્ષમતા અને જાળવણીક્ષમતા: કસ્ટમ પ્રોપર્ટી માટે અપેક્ષિત મૂલ્યનો પ્રકાર સ્પષ્ટપણે વ્યાખ્યાયિત કરીને, તમે તમારા કોડને વધુ સમજી શકાય તેવો અને ભૂલોની ઓછી સંભાવનાવાળો બનાવો છો.
• ઉન્નત એનિમેશન ક્ષમતાઓ: @property કસ્ટમ પ્રોપર્ટીઝ માટે સરળ સંક્રમણો અને એનિમેશનને સક્ષમ કરે છે, જે ગતિશીલ અને આકર્ષક યુઝર ઇન્ટરફેસ બનાવવા માટે નવી શક્યતાઓ ખોલે છે.
• વધુ સારું પ્રદર્શન: બ્રાઉઝર્સ રજીસ્ટર્ડ કસ્ટમ પ્રોપર્ટીઝનો ઉપયોગ કરીને એલિમેન્ટ્સના રેન્ડરિંગને ઑપ્ટિમાઇઝ કરી શકે છે, જે સુધારેલ પ્રદર્શન તરફ દોરી જાય છે.
• ટાઇપ સેફ્ટી: બ્રાઉઝર ચકાસે છે કે સોંપેલ મૂલ્ય ઘોષિત સિન્ટેક્સ સાથે મેળ ખાય છે, અનપેક્ષિત વર્તનને અટકાવે છે અને ડિબગિંગને સરળ બનાવે છે. આ ખાસ કરીને મોટા પ્રોજેક્ટ્સમાં ઉપયોગી છે જ્યાં ઘણા ડેવલપર્સ કોડબેઝમાં યોગદાન આપી રહ્યા છે.
• ડિફૉલ્ટ મૂલ્યો: કસ્ટમ પ્રોપર્ટી હંમેશા માન્ય મૂલ્ય ધરાવે છે તેની ખાતરી કરવી, ભલે તે સ્પષ્ટપણે સેટ ન હોય, ભૂલોને અટકાવે છે અને તમારા CSS ની મજબૂતીમાં સુધારો કરે છે.

બ્રાઉઝર સુસંગતતા

2023 ના અંત સુધીમાં, @property પાસે સારું, પરંતુ સાર્વત્રિક નહીં, બ્રાઉઝર સપોર્ટ છે. તે મોટાભાગના આધુનિક બ્રાઉઝર્સમાં સપોર્ટેડ છે, જેમાં Chrome, Firefox, Safari અને Edge શામેલ છે. જોકે, જૂના બ્રાઉઝર્સ તેને સપોર્ટ ન કરી શકે. પ્રોડક્શનમાં @property નો ઉપયોગ કરતા પહેલા હંમેશા Can I use... જેવી વેબસાઇટ્સ પર નવીનતમ બ્રાઉઝર સુસંગતતા માહિતી તપાસો.

જૂના બ્રાઉઝર્સને હેન્ડલ કરવા માટે, તમે ફોલબેક સ્ટાઇલ પ્રદાન કરવા માટે ફીચર ક્વેરીઝ (@supports) નો ઉપયોગ કરી શકો છો:

@supports (--property: value) {
  /* Styles that use @property */
}

@supports not (--property: value) {
  /* Fallback styles for browsers that don't support @property */
}

--property અને value ને વાસ્તવિક કસ્ટમ પ્રોપર્ટી અને તેના મૂલ્ય સાથે બદલો.

@property નો ઉપયોગ ક્યારે કરવો

નીચેના સંજોગોમાં @property નો ઉપયોગ કરવાનું વિચારો:

• જ્યારે તમારે કસ્ટમ પ્રોપર્ટીઝને એનિમેટ કરવાની જરૂર હોય: આ @property માટે પ્રાથમિક ઉપયોગ કેસ છે. સાચા સિન્ટેક્સ સાથે પ્રોપર્ટીને રજીસ્ટર કરવાથી સરળ એનિમેશન સક્ષમ થાય છે.
• જ્યારે તમે કસ્ટમ પ્રોપર્ટીઝ માટે ટાઇપ સેફ્ટી લાગુ કરવા માંગતા હોવ: જો તમે ખાતરી કરવા માંગતા હોવ કે કસ્ટમ પ્રોપર્ટી હંમેશા ચોક્કસ પ્રકારનું મૂલ્ય ધરાવે છે, તો તેને રજીસ્ટર કરવા માટે @property નો ઉપયોગ કરો.
• જ્યારે તમે કસ્ટમ પ્રોપર્ટી માટે ડિફૉલ્ટ મૂલ્ય પ્રદાન કરવા માંગતા હોવ: initial-value ડિસ્ક્રિપ્ટર તમને ફોલબેક મૂલ્ય સ્પષ્ટ કરવાની મંજૂરી આપે છે.
• મોટા પ્રોજેક્ટ્સમાં: @property કોડ જાળવણીક્ષમતામાં વધારો કરે છે અને ભૂલોને અટકાવે છે, જે તેને ઘણા ડેવલપર્સવાળા મોટા પ્રોજેક્ટ્સ માટે ખાસ કરીને ફાયદાકારક બનાવે છે.
• પુનઃઉપયોગી ઘટકો અથવા ડિઝાઇન સિસ્ટમ્સ બનાવતી વખતે: @property તમારા ઘટકોમાં સુસંગતતા અને અનુમાનિતતા સુનિશ્ચિત કરવામાં મદદ કરી શકે છે.

ટાળવા જેવી સામાન્ય ભૂલો

• syntax ડિસ્ક્રિપ્ટર ભૂલી જવું: syntax ડિસ્ક્રિપ્ટર વિના, બ્રાઉઝરને અપેક્ષિત મૂલ્યનો પ્રકાર ખબર નહીં પડે, અને એનિમેશન યોગ્ય રીતે કામ કરશે નહીં.
• ખોટા syntax મૂલ્યનો ઉપયોગ કરવો: ખોટો સિન્ટેક્સ પસંદ કરવાથી અનપેક્ષિત વર્તન થઈ શકે છે. ખાતરી કરો કે તમે એવો સિન્ટેક્સ પસંદ કરો છો જે અપેક્ષિત મૂલ્યના પ્રકારને સચોટ રીતે પ્રતિબિંબિત કરે છે.
• initial-value ન આપવું: પ્રારંભિક મૂલ્ય વિના, કસ્ટમ પ્રોપર્ટી અનડિફાઇન્ડ હોઈ શકે છે, જે ભૂલો તરફ દોરી જાય છે. હંમેશા એક સમજદાર ડિફૉલ્ટ મૂલ્ય પ્રદાન કરો.
• સિન્ટેક્સ તરીકે * નો વધુ પડતો ઉપયોગ: સુવિધાજનક હોવા છતાં, * નો ઉપયોગ ટાઇપ ચેકિંગ અને એનિમેશનના ફાયદાઓને નકારે છે. તેનો ઉપયોગ ત્યારે જ કરો જ્યારે તમારે ખરેખર કોઈપણ પ્રકારના મૂલ્યને મંજૂરી આપવાની જરૂર હોય.
• બ્રાઉઝર સુસંગતતાને અવગણવી: હંમેશા બ્રાઉઝર સુસંગતતા તપાસો અને જૂના બ્રાઉઝર્સ માટે ફોલબેક સ્ટાઇલ પ્રદાન કરો.

@property અને CSS Houdini

@property એ CSS Houdini નામના APIs ના મોટા સમૂહનો ભાગ છે. Houdini ડેવલપર્સને બ્રાઉઝરના રેન્ડરિંગ એન્જિનમાં ટેપ કરવાની મંજૂરી આપે છે, જે તેમને સ્ટાઇલિંગ અને લેઆઉટ પ્રક્રિયા પર અભૂતપૂર્વ નિયંત્રણ આપે છે. અન્ય Houdini APIs માં શામેલ છે:

• Paint API: તમને કસ્ટમ બેકગ્રાઉન્ડ ઇમેજ અને બોર્ડર્સને વ્યાખ્યાયિત કરવાની મંજૂરી આપે છે.
• Animation Worklet API: ઉચ્ચ-પ્રદર્શન એનિમેશન બનાવવાનો એક માર્ગ પ્રદાન કરે છે જે સીધા બ્રાઉઝરના કમ્પોઝિટર થ્રેડમાં ચાલે છે.
• Layout API: તમને કસ્ટમ લેઆઉટ એલ્ગોરિધમ્સ વ્યાખ્યાયિત કરવા સક્ષમ બનાવે છે.
• Parser API: બ્રાઉઝરના CSS પાર્સરની ઍક્સેસ પ્રદાન કરે છે.

@property એ શીખવા માટે પ્રમાણમાં સરળ Houdini API છે, પરંતુ તે વધુ અદ્યતન Houdini સુવિધાઓ શોધવાનો દરવાજો ખોલે છે.

નિષ્કર્ષ

@property એ એક શક્તિશાળી CSS એટ-રૂલ છે જે કસ્ટમ પ્રોપર્ટીઝ માટે અદ્યતન ક્ષમતાઓને અનલૉક કરે છે. બ્રાઉઝર સાથે કસ્ટમ પ્રોપર્ટીઝને રજીસ્ટર કરીને, તમે ટાઇપ સેફ્ટી લાગુ કરી શકો છો, સરળ એનિમેશન સક્ષમ કરી શકો છો, અને તમારા CSS કોડની એકંદર મજબૂતીમાં સુધારો કરી શકો છો. જ્યારે બ્રાઉઝર સપોર્ટ સાર્વત્રિક નથી, ત્યારે @property નો ઉપયોગ કરવાના ફાયદા, ખાસ કરીને મોટા પ્રોજેક્ટ્સ અને ડિઝાઇન સિસ્ટમ્સમાં, તેને આધુનિક વેબ ડેવલપમેન્ટ માટે એક મૂલ્યવાન સાધન બનાવે છે. @property અપનાવો અને તમારી CSS કુશળતાને આગલા સ્તર પર લઈ જાઓ!